<template>
	<view class="indexLayout">
		<!-- 安全区域 -->
		<view class="" :style="{height: getStatusBarHeight() + 'px'}"></view>
		
		<view class="logo" :style="{height: getNavBarHeight() + 'rpx'}">
			<image src="@/static/index-slices/Group3607@2x.png"  mode="aspectFit"></image>
		</view>
		
		<view class="head">
			<!-- <view class="carousel-shell">
				<view class="item">
					<image src="@/static/index-slices/Rectangle 1543787168@2x.png" mode="scaleToFill"></image>
				</view>
				<view class="item">
					<image src="@/static/index-slices/Rectangle 1543787169@2x.png" mode="scaleToFill"></image>
				</view>
				<view class="item">
					<image src="@/static/index-slices/Rectangle 1543787169@2x(2).png" mode="scaleToFill"></image>
				</view>
				<view class="item">
					<image src="@/static/index-slices/Rectangle 1543787169@2x(3).png" mode="scaleToFill"></image>
				</view>
				<view class="item">
					<image src="@/static/index-slices/Rectangle 1543787169@2x(2).png" mode="scaleToFill"></image>
				</view>
				<view class="item">
					<image src="@/static/index-slices/Rectangle 1543787169@2x(3).png" mode="scaleToFill"></image>
				</view>
			</view> -->
			<swiper class="carousel-shell" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item class="carousel-item">
					<view class="swiper-item">
						<image src="@/static/index-slices/Rectangle 1543787168@2x.png" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item class="carousel-item">
					<view class="swiper-item">
						<image src="@/static/index-slices/Rectangle 1543787169@2x.png" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item class="carousel-item">
					<view class="swiper-item">
						<image src="@/static/index-slices/Rectangle 1543787168@2x.png" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item class="carousel-item">
					<view class="swiper-item">
						<image src="@/static/index-slices/Rectangle 1543787169@2x.png" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item class="carousel-item">
					<view class="swiper-item">
						<image src="@/static/index-slices/Rectangle 1543787168@2x.png" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item class="carousel-item">
					<view class="swiper-item">
						<image src="@/static/index-slices/Rectangle 1543787169@2x.png" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		getStatusBarHeight,
		getTitleBarHeight,
		getNavBarHeight,
	} from "@/utils/system.js"
	
	const mySwiper = new Swiper('.carousel-shell',{
		
		effect:'cube',
		cubeEffect:{
			slideShadows: true,
			shadow: true,
			shadowOffset: 100,
			shadowScale: 0.6
		}
	})
</script>

<style lang="scss" scoped>
	.indexLayout{
		height: 100vh;
		overflow: auto;
		.logo{
			width: 100vw;
			display: flex;
			flex-direction: row;
			align-items: center;
			overflow: hidden;
			image{
				height: 49rpx;
				transform: translateX(-150rpx);
			}
		}
		.head{
			// $itemWidth: 450rpx;
			// $itemHeight: 600rpx;
			// $itemNum: 6;
			// $percentage: (100% / 6);
			// $translateZ: 450rpx;
			
			
			.carousel-shell{
				position: relative;
				width: 100vw;
				height: 600rpx;
				perspective: 1000rpx;
				transform-origin: center;
				background-image: linear-gradient(to top,#9894ff 50%,#ff0575);
				.carousel-item{
					margin: auto;
					// display: flex;
					// justify-content: center;
					// align-items: center;
					background-color: #ff0575;
					// transform-origin: center;
					// transform-style: preserve-3d;
					// transform: translateZ(-600rpx) rotateY(0);
					// border: 5rpx solid orange;
					// animation: carousel 9s infinite cubic-bezier(0.77,0,0.175,1) backwards;
					
					.swiper-item{
						opacity: 0.5;
						height: 600rpx;
						width: 450rpx;
						box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.3);
						border-radius: 20rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
			
			
			// .carousel-shell{
			// 	position: relative;
			// 	margin: auto;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// 	height: $itemHeight;
			// 	width: $itemWidth;
			// 	transform-origin: center;
			// 	transform-style: preserve-3d;
			// 	transform: translateZ(-600rpx) rotateY(0);
			// 	border: 5rpx solid orange;
			// 	animation: carousel 9s infinite cubic-bezier(0.77,0,0.175,1) backwards;
			// 	.item{
			// 		opacity: 0.5;
			// 		position: absolute;
			// 		height: $itemHeight;
			// 		width: $itemWidth;
			// 		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.3);
			// 		border-radius: 20rpx;
			// 		overflow: hidden;
			// 		// -webkit-box-reflect: below 50rpx -webkit-linear-gradient(transparent 50%,rgba(0, 0, 0, 0.3));
			// 		image{
			// 			width: 100%;
			// 			height: 100%;
			// 		}
			// 	}
			// 	@for $var from 1 through $itemNum{
			// 		// 计算旋转角度
			// 		$rotation-angle: (360deg / $itemNum) * ($var - 1);
					
			// 		.item:nth-child(#{$var}){ // 字符插入
			// 			transform: rotateY($rotation-angle) translateZ($translateZ);
			// 		}
			// 	}
				
			// 	@keyframes carousel {
			// 		@for $var from 1 through $itemNum{
			// 			// 计算旋转角度
			// 			$rotation-angle: (360deg / $itemNum) * ($var - 1);
						
			// 			// 计算百分比
			// 			$percent1: $percentage * ($var - 1);
			// 			$percent2: $percentage * $var - ($percentage / 2);
			// 			#{$percent1},#{$percent2}{
			// 				transform: rotateY($rotation-angle) translateZ($translateZ);
			// 			}
			// 		}
			// 	}
			// }
		}
		
	}
	.indexLayout::-webkit-scrollbar{
		width: 0;
		height: 0;
		background-color: transparent;
	}
</style>